<template>
	<view class="container">
		<xk-header :headerbg="true" class="header" :back="true" title="提交预约"></xk-header>
		<view class="title">会议室信息</view>
		<!-- 会议室相关信息表单 start -->
		<view class="appointment-info">
			<u--form
				labelPosition="left"
				:model="model"
				:rules="rules"
				ref="form"
				labelAlign="left"
			>
				<u-form-item
					label="会议室名称 :"
					prop="userInfo.name"
					borderBottom
					labelWidth="200rpx"
				>
					<u--input
						placeholder="请输入会议室名称"
						v-model="model.userInfo.name"
						border="none"
					></u--input>
				</u-form-item>

				<u-form-item
					label="主题 :"
					prop="userInfo.title"
					borderBottom
					labelWidth="200rpx"
				>
					<u--input
						placeholder="请输入会议主题"
						v-model="model.userInfo.title"
						border="none"
					></u--input>
				</u-form-item>

				<u-form-item
					label="备注 :"
					prop="userInfo.remark"
					borderBottom
					labelWidth="200rpx"
				>
					<u--input
						placeholder="请输入会议备注"
						v-model="model.userInfo.remark"
						border="none"
					></u--input>
				</u-form-item>
			</u--form>
			<view class="chose-equipment">
				<view class="chose-title">可选设施</view>
				<view class="add-eq"><u-icon name="plus" @click="addEq"></u-icon></view>
				<u-popup :show="show" mode="right" @close="close">
				  <view class="list">
					  <view class="select-title">选择设施</view>
						  <view class="content">
							  <block v-for="(item, index) in equipment" :key="index">
								  <view class="list-eq">
									  <view :data-id="index" :data-item="item" @click="choseEq" :class="item.chose ? 'accommodate-people add' : 'accommodate-people'">{{ item.name }}</view>
								  </view>
							  </block>
						   </view>
					  <u-divider></u-divider>
					  <view class="feedback">没有你的设施？请使用"意见反馈"通知我们，我们将及时添加。</view>
					  <view class="bottom-button">
						  <u-button @click="confirm" type="primary" text="确定" customStyle="width: 110px;height: 40px;float:right;margin-right:30rpx;border-radius:23px;"></u-button>
						  <u-button @click="reset" type="warning" :plain="true" text="重置" customStyle="width: 110px;height: 40px;float:left;margin-left:30rpx;border-radius:23px;"></u-button>
					  </view>
				  </view>
				</u-popup>
				<view class="chosen-equipment">
					<block v-for="(item, index) in chosenEq" :key="index">
					  <view class="list-eq-chosen">
						  <view class="chosen-list">{{ item.name }}
							<view class="delet"><u-icon name="close-circle-fill" color="#D9001B" @click="deleteEq(index,item)"></u-icon></view>
						  </view>
					  </view>
					</block>
				</view>
			</view>
		</view>
		<!-- 会议室相关信息表单 end -->

		<view class="title" style="top: 40rpx;">会议室设置及费用</view>
		<!-- 会议室设置及费用 start -->
		<view class="room-set">
			<view class="first-line">
				<view class="line-st">
					<view class="top">是否开放显示主题</view>
					<view class="bottom">默认打开，在门口显示屏显示主题内容</view>
					<view class="switch"><u-switch v-model="value" @change="change"></u-switch></view>
				</view>
				<u-divider></u-divider>
			</view>

			<view class="second-line">
				<view class="line-nd">
					<view class="top-nd">
						<view class="top-nd-title">预定日期</view>
						<view class="getTime">{{ date }}</view>
						<view class="top-nd-icon">
							<u-icon name="arrow-right" @click="showDate = true"></u-icon>
						</view>
					</view>
					<u-datetime-picker
						:show="showDate"
						v-model="timeValue"
						mode="date"
						@cancel="timeCancel"
						@confirm="dateConfirm"
						@close="timeClose"
						:closeOnClickOverlay="true"
					></u-datetime-picker>
				</view>
				<u-divider></u-divider>
			</view>

			<view class="third-line">
				<view class="line-rd">
					<view class="top-rd">
						<view class="top-rd-title">预定时间</view>
						<view class="start-time" @click="clickStart(1)">{{ startTime }}</view>
						<view class="to">-</view>
						<view class="end-time" @click="clickEnd(0)">{{ endTime }}</view>
					</view>
					<u-datetime-picker
						:show="showTime"
						mode="time"
						@cancel="timeCancel"
						@confirm="timeConfirm"
						@close="timeClose"
						:closeOnClickOverlay="true"
					></u-datetime-picker>
				</view>
				<u-divider></u-divider>
			</view>

			<view class="forth-line">
				<view class="line-th">
					<view class="top-th">
						<view class="top-th-title">计时费用</view>
						<view class="top-th-price">10元/30分钟</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 会议室设置及费用 end -->

		<!-- 预约按钮 start -->
		<view class="hand-on">
			<u-button @click="jumpToSucceed" type="primary" text="提交预约" customStyle="width: 280rpx;margin-top: 24rpx;border-radius: 23px;"></u-button>
		</view>
		<!-- 预约按钮 end -->
	</view>
</template>

<script>

	const App = getApp()

	export default {
		components: {},
		data() {
			return {
				model: {
					userInfo: {
						name: '',
						title: '',
						remark: ''
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写会议室名称',
						trigger: ['blur', 'change']
					},
					'userInfo.title': {
						type: 'string',
						required: true,
						message: '请填写会议主题',
						trigger: ['blur', 'change']
					},
					'userInfo.remark': {
						type: 'string',
						required: true,
						message: '请填写会议备注',
						trigger: ['blur', 'change']
					},
				},
				show:false,//是否打开弹窗
				equipment:[
					{name:'投影仪',chose:false},
					{name:'白板',chose:false},
					{name:'转接头',chose:false},
					{name:'智真电话',chose:false},
					{name:'八爪鱼',chose:false},
					{name:'沙发',chose:false},
					{name:'台式电脑',chose:false},
					{name:'笔记本电脑',chose:false},
				],//弹窗中的设施列表
				chosenEq:[],//已选的设施列表
				choes:false,
				value: '',
				showTime:false,
				showDate:false,
				timeValue: Number(new Date()),
				date:'',
				startTime:'00:00',
				endTime:'24:00',
				timeStatus:0
			};
		},
		methods: {
			//开启添加设施弹窗
			addEq(){
				this.show = true
			},

			//关闭设施选择弹窗
			close() {
				this.show = false
			},

			//选择设施
			choseEq(e) {
				this.equipment[e.currentTarget.dataset.id].chose = !this.equipment[e.currentTarget.dataset.id].chose
				if(this.equipment[e.currentTarget.dataset.id].chose == true){
					e.currentTarget.dataset.item.id = e.currentTarget.dataset.id
					this.chosenEq.push(e.currentTarget.dataset.item)
				}
			},

			//删除已选设施
			deleteEq(index,item) {
				this.chosenEq.splice(index,1)
				this.equipment[item.id].chose = false
			},

			//重置
			reset() {
				for(let i = 0; i < this.equipment.length; i++){
					this.equipment[i].chose = false
					this.chosenEq = []
				}
			},

			//确定
			confirm() {
				this.show = false
			},

			//是否开放显示主题按钮
			change(e) {

			},

			//关闭时间选择器
			timeCancel() {
				this.showDate = false
				this.showTime = false
			},
			//选择日期
			dateConfirm(e) {
				this.showDate = false
				var date = new Date(e.value);  // 参数需要毫秒数，所以这里将秒数乘于 1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = date.getDate() + ' ';
				this.date = Y+M+D
			},
			//点击开始时间
			clickStart(e) {
				this.timeStatus = e
				this.showTime = true
			},
			//点击结束时间
			clickEnd(e) {
				this.timeStatus = e
				this.showTime = true
			},
			//选择时间
			timeConfirm(e) {
				this.showTime = false
				if(this.timeStatus == 1){
					this.startTime = e.value
				}else{
					this.endTime = e.value
				}

			},
			//点击遮罩层关闭
			timeClose() {
				this.showTime = false
				this.showDate = false
			},
			//跳转到支付页面
			jumpToSucceed() {
				uni.navigateTo({
					url:'/pagesB/meeting/successful'
				})
			}

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: rgba(246, 247, 251, 1);
		height: 100vh;

		.title {
			position: relative;
			font-size: 28rpx;
			color: rgba(153, 153, 153, 1);
			top: 15rpx;
			margin-left: 42rpx;
		}
		.room-set {
			position: relative;
			width: 96%;
			height: 377rpx;
			background-color: #FFFFFF;
			top: 54rpx;
			padding: 16rpx;
			.first-line {
				position: relative;
				width: 100%;
				height: 100rpx;
				.line-st {
					position: relative;
					top: 10rpx;
					left: 30rpx;
					.top {
						font-size: 28rpx;
					}
					.bottom {
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
					}
					.switch {
						position: absolute;
						right: 40rpx;
						top: 10rpx;
					}
				}
			}
			.second-line {
				position: relative;
				width: 100%;
				height: 50rpx;
				.line-nd {
					position: relative;
					height: 60rpx;
					top: 20rpx;
					left: 30rpx;
					.top-nd {
						position: relative;
						font-size: 28rpx;
						.top-nd-title {
							position: absolute;
						}
						.getTime {
							position: absolute;
							top: 2rpx;
							right: 120rpx;
						}
						.top-nd-icon {
							position: absolute;
							right: 60rpx;
							top: 6rpx;
						}
					}
				}
			}
			.third-line {
				position: relative;
				width: 100%;
				height: 50rpx;
				top: 50rpx;
				.line-rd {
					position: relative;
					height: 60rpx;
					top: 20rpx;
					left: 30rpx;
					.top-rd {
						position: relative;
						font-size: 28rpx;
						.top-rd-title {
							position: absolute;
						}
						.start-time {
							position: absolute;
							right: 200rpx;
						}
						.to {
							position: absolute;
							right: 160rpx;
						}
						.end-time {
							position: absolute;
							right: 60rpx;
						}
					}
				}
			}
			.forth-line {
				position: relative;
				width: 100%;
				height: 50rpx;
				top: 100rpx;
				.line-th {
					position: relative;
					height: 60rpx;
					top: 20rpx;
					left: 30rpx;
					.top-th {
						position: relative;
						font-size: 28rpx;
						.top-th-title {
							position: absolute;
						}
						.top-th-price {
							position: absolute;
							right: 60rpx;
							color: rgba(161, 161, 161, 1);
						}
					}
				}
			}
		}
		.appointment-info {
			position: relative;
			width: 96%;
			height: 500rpx;
			background-color: #FFFFFF;
			top: 30rpx;
			padding: 16rpx;

			.chose-equipment{
				position: relative;
				width: 100%;
				height: 240rpx;
				overflow-y: scroll;

				.chose-title {
					position: absolute;
					font-size: 28rpx;
					top: 20rpx;
				}
				.add-eq {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}
				.chosen-equipment {
					position: absolute;
					overflow-y: scroll;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					height: 170rpx;
					bottom: 6rpx;
					.list-eq-chosen {
						position: relative;
						width: 340rpx;
						margin-bottom: 20rpx;
						margin-top: 10rpx;
						margin-left: 20rpx;
						.chosen-list {
							position: relative;
							height: 54rpx;
							width: 300rpx;
							background-color: #ffffff;
							border: 1px solid rgba(228, 228, 228, 1);
							text-align: center;
							line-height: 54rpx;
							.delet {
								position: absolute;
								right: -12rpx;
								top: -8rpx;
							}
						}
					}
				}
			}
		}
	}
	.bottom-button {
	  width: 100%;
	  position: absolute;
	  bottom: 60rpx;
	}
	.feedback {
		width: 502rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 28rpx;
		margin: 0 auto;
		margin-left: 10rpx;
	}
	.select-title{
		  width: 60px;
		  height: 20px;
		  color: #000000;
		  font-size: 30rpx;
		  text-align: left;
		  margin: 20rpx 0 30rpx 40rpx;
	}
	.accommodate-people{
		  margin: 10rpx 20rpx 0 20rpx;
		  width: 220rpx;
		  height: 80rpx;
		  background-color: rgba(242, 242, 242, 1);
		  border-radius: 40rpx;
		  color: rgba(51, 51, 51, 1);
		  font-size: 26rpx;
		  text-align: center;
		  line-height: 80rpx;
		  font-family: Arial;
	}
	.list {
		overflow-y: scroll;
	}
	.content{
		display: flex;
		width: 502rpx;
		flex-wrap: wrap;
	}
	.list-eq {
		width: 240rpx;
		margin-bottom: 20rpx;
	}
	.add {
		background-color: #008EE5;
		color: #ffffff;
	}
	.hand-on {
		position: fixed;
		height: 120rpx;
		background-color: #FFFFFF;
		width: 100%;
		bottom: 0;
	}
</style>
